<template>
  <el-card shadow="always" style="margin-bottom: 20px">
    <h3>大盘指数</h3>
    <div v-for="index in indices" :key="index.name" style="margin: 10px 0">
      <strong>{{ index.name }}：</strong>
      <span :style="{ color: index.change > 0 ? 'red' : 'green' }">
        {{ index.value }} ({{ index.change }}%)
      </span>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const indices = ref([
  { name: '上证指数', value: 3200, change: 0.56 },
  { name: '深证成指', value: 13000, change: -0.34 },
  { name: '创业板指', value: 2700, change: 1.12 },
])

onMounted(() => {
  // 模拟定时更新大盘数据
  setInterval(() => {
    indices.value = indices.value.map((index) => ({
      ...index,
      change: (Math.random() * 4 - 2).toFixed(2),
      value: (index.value + Math.random() * 20 - 10).toFixed(2),
    }))
  }, 5000)
})
</script>
